<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>phonegap登陆系统</title>
<meta name="keywords" content="关键词">
<meta name="description" content="">
<style type="text/css">
* {
	margin: 0;
	padding: 0
}

body {
	font-size: 12px;
	font-family: '微软雅黑';
	color: #666
}

.login {
	display: flex;
	height:100%;
	flex-direction: column;
}

.login .l-title {
	background: aquamarine;
	display: flex;
	height:10%;
	justify-content: center;
	align-items: center;
	font-size: 18px;
}

.login .l-content {
	background: cadetblue;
	height: 29em;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.login .l-content input {
	width: 70%;
	height: 18px;
	padding: 10px 0 10px 10px;
	line-height: 18px;
	border: none;
	background: #fff;
	color: #333;
	font-family: Verdana, Tahoma, Arial;
	font-size: 16px;
}

.login .l-content .l-submit {
	width: 70%;
}

.login .l-content .l-submit button {
	width: 100%;
	height: 40px;
	line-height: 35px;
	border: none;
	font-size: 17px;
	font-weight: 400px;
	font-family: "Microsoft Yahei", "微软雅黑", SimHei, "黑体", "Hiragino Sans GB",
		STHeiTi, sans-serif;
	color: #fff;
	background: #86ce2f;
}

.login .l-footer {
	background: coral;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	height:10%;
}
.errorinfo{
	width:70%;
	color:red;
	font-family:"微软雅黑";
	font-weight:500;
	font-size:18px;
	text-align: left;
}
</style>
<!--   	<script type="text/javascript" src="js/cordova_plugins.js"></script>
    	<script type="text/javascript" src="js/cordova.js"></script> -->
</head>
<body>
	<div class="login">
		<div class="l-title">
			<p>晓庄信工院信息系统</p>
		</div>
		<div class="l-content">
			<img src="images/head.jpg" alt="" width="140px" height="140px">
			<div class="errorinfo">
			</div>
			<input type="text" id="username" placeholder="请输入用户名:">
			<input type="password" id="userpwd" placeholder="请输入用户密码:">
			<div class="l-submit">
				<button id="login_btn" type="button">用户登陆</button>
			</div>
		</div>
		<div class="l-footer">
			<p>XXXXXXX软件科技有限公司|荣誉出品</p>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	/*main */
    	$(function(){
    		 storage = window.localStorage; 
			$("#username,#userpwd").keydown(removeError);
			/*帐号检验*/
			$("#username").blur(checkUserName);
			/*密码校验*/
			$("#userpwd").blur(checkPassword);
			/*登陆验证*/
    		$("#login_btn").click(checkLogin);	
    	});

    	function removeError(){
    		$(".errorinfo").html("");
    	}

    	/*检查帐号*/
    	function checkUserName(){
			var username = $("#username").val();
			if(username.trim()==""|| null==username){
				$(".errorinfo").html("帐号不能为空");
				return false;
			}
			if(username.trim().length<4){
				$(".errorinfo").html("帐号不能小于4位");
				return false;
			}
            return true;
        }
		/*检查密码*/
    	function checkPassword(){
			var password = $("#userpwd").val();
			if(password.trim()==""|| null==password){	
				$(".errorinfo").html("密码不能为空");
				return false;
			}
			if(password.trim().length<6){
				$(".errorinfo").html("密码不能小于6位");
				return false;
			}
			return true;
        }

        /*登陆校验*/
        function checkLogin(){
    			var u_name = $("#username").val();
    			var u_password = $("#userpwd").val();
                if(checkUserName()&&checkPassword()){
                    	$.ajax({
    				url: "user/user_login.action",
    				type:"get",
    				data : {
    					"user.username" : u_name,
    					"user.password" : u_password,
    				},
    				jsonpCallback : "logincallback",
    				dataType:"jsonp",
    				success:function(data){
						if(data.status==0){
							storage["uid"] = data.data;
							window.location.href= "index.html";	
						}
						if(data.status==-1){
							$(".errorinfo").html(data.msg);
							$("#username").focus();
						}
						if(data.status==-2){
							$(".errorinfo").html(data.msg);
							$("#userpwd").focus();
						}
    				},
    				error:function(XMLHttpRequest,textStatus,errorThrown){
    					alert(XMLHttpRequest.status+","+XMLHttpRequest.readyState+","+textStatus);
    				}
    				});        
                }
    		
    		}
    </script>
</body>
</html>